<template>
  <div style="height: 100%; padding-top: 0px">
    <el-row class="button-fixed"
            v-show="showTabs">
      <div class="font-weight">
        <el-button size="medium"
                   type="text"
                   :class="[this.typeData === 1 ? 'type-menu' : 'menu-color']"
                   @click="changeData(1)">工单历史</el-button>
        <el-button size="medium"
                   type="text"
                   :class="[this.typeData === 2 ? 'type-menu' : 'menu-color']"
                   @click="changeData(2)">&nbsp;|&nbsp;&nbsp;新建工单</el-button>
        <!-- <el-button
          size="medium"
          type="text"
          @click="sendLoadId1"
          >&nbsp;|&nbsp;&nbsp;申请号1</el-button
        >
        <el-button
          size="medium"
          type="text"
          @click="sendLoadId2"
          >&nbsp;|&nbsp;&nbsp;申请号2</el-button
        > -->
      </div>
    </el-row>
    <el-row style="padding-top: 30px">
      <order-history v-show="typeData == 1"
                     :sid="sid"
                     :customInfo="customInfo"
                     @sendShowTabs="showTab"
                     :customerId='customerIdInfo'
                     :workbenchInfo="workbenchInfo"></order-history>
      <create-order v-show="typeData == 2"
                    :typeData="typeData"
                    :key="timer"
                    :customerId="customerIdInfo"
                    :sendCreate="sendCreate"
                    @changeTypeData="TypeDataFun"
                    :isOrderCreate='false'
                    :workbenchInfo="workbenchInfo"></create-order>
    </el-row>
  </div>
</template>

<script>
import orderHistory from './orderHistory.vue'
import createOrder from '@/components/common/createOrder'

export default {
  props: {
    workbenchInfos: {
      type: Object,
      default: {}
    },
    customInfo: {
      type: Boolean
    },
    customerId: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      sendCreate: false,
      typeData: 1,
      showTabs: true,
      timer: "",
    }
  },
  components: {
    orderHistory,
    createOrder
  },
  watch: {
    workbenchInfos (n, o) {
      this.workbenchInfos = n
      this.showTabs = true
    },
    customerId (n, o) {
      this.customerId = n
    },
  },
  created () {
    this.$store.commit('orderDetailsIdFun', '')
  },
  mounted () {
    this.$EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.timer = new Date().getTime()
    });
  },
  computed: {
    workbenchInfo () {
      return this.workbenchInfos ? this.workbenchInfos : {}
    },
    customerIdInfo () {
      return this.customerId ? this.customerId : ''
    }
  },
  methods: {
    sendLoadId1 () {
      window.postMessage({
        "event": "EventApplicationNum",
        "data": {
          "loanId": "20201740001730",
        }
      })
    },
    sendLoadId2 () {
      window.postMessage({
        "event": "EventApplicationNum",
        "data": {
          "loanId": "20201740001731",
        }
      })
    },
    TypeDataFun (e) {
      this.typeData = 1
    },
    showTab (e) {
      this.showTabs = e
    },
    create () {
    },
    changeData (num) {
      if (num == 1) {
        this.$store.commit('historyPerformShowFun', '2')
      }
      // 每次新建去请求坐席信息
      if (num === 2) {
        this.$store.commit('orderTitleFun', '新建服务单') // 主标题
        this.sendCreate = true;
      }
      sessionStorage.setItem('workbenchInfoFun', 'true')
      this.typeData = num // 改变工单历史和新建工单页签展示的条件id
    }
  }
}
</script>
<style scoped>
.menu-color {
  color: #8f8f91;
  font-weight: normal;
}
.type-menu {
  font-weight: 600;
}
.type-menu,
.menu-color {
  cursor: pointer;
}
.button-fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  padding: 0 20px;
  width: 100%;
  line-height: 35px;
  margin-top: -34px;
  padding-top: 20px;
}
</style>
